/* Reset some default styles */
body, h1, h2, h3, p {
  margin: 0;
  padding: 0;
}

/* Set a base font size and family */
body {
  font-family: "Anuphan", sans-serif;
  font-size: 16px;
}

/* General styles for the entire page */
html {
  background-color: #046A3A;
  color: white;
}

/* Header styles */
header {
  display: flex;
  justify-content:inline-block;
  justify-content: flex-end; /** This puts the elements on the right */
  align-items: center;
  padding:30px;
  margin-right:-30px;
}

.MyRestaurant {
  font-family: "Lobster", cursive; /* Corrected 'display' to 'cursive' */
  font-weight: bold;
  font-style: italic; /* Use 'italic' for italics */
  font-size: 28px;
  position: relative;
  left: 20px;
  /* margin-right: 15px; <-- This will prevent it from being aligned to the left, and will the "left" element will move away according to margin-right, not default*/
}

/* Navigation styles */
.nav__links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__links li {
  display: inline-block;
  margin-right: 20px; /* Added margin-right for spacing */
}

.nav__links li a {
  font-weight: bold;
  color: #edf0f1;
  text-decoration: none;
  transition: color 0.3s ease; /* Improved the transition */
}

.nav__links li a:hover {
  color: #ffff4d;
}

.Phone {
  font-weight: bold;
  color: #edf0f1;
}

/* Button styles */
button {
  font-weight: bold;
  font-size: 13px;
  color: black;
  text-decoration: none;
  background-color: #00FA9A;
  border: none;
  border-radius: 15px;
  padding: 10px 20px;
  cursor: pointer;
}

button:hover {
  background-color: #ffff4d; /* Change background color to yellow on hover */
}

/* Highlights section styles */
.Highlights {
  text-align: center;
  color: black;
}

.Wingstop {
  width: 100%;
  height: auto;
}

.Tagline {
  font-family: Georgia, serif;
  font-weight: bold;
  position: absolute;
  top: 63%;
  left: 7%;
  color: white;
}

.Promo {
  font-family: 'Comic Sans MS', cursive;
  font-weight: bold;
  font-size: 20px; /* Adjusted font size for better readability */
  position: absolute;
  top: 66%;
  left: 7%;
  color: white;
}

.Promo2 {
  font-family: 'Comic Sans MS', cursive;
  font-weight: bold;
  font-size: 20px; /* Adjusted font size for better readability */
  position: absolute;
  top: 70%;
  left: 7%;
  color: white;
}

.Reserve2 {
  position: absolute;
  top: 75%;
  left: 7%;
  font-size: 20px; /* Adjusted font size for better readability */
  background-color: #00FA9A;
  color: black;
  border: none;
  border-radius: 15px;
  padding: 10px 20px;
  transition: background-color 0.3s ease; /* Add a transition for a smooth color change */
}